<template>
 <div>
<el-row :gutter="10">
      <el-col :xs='22' :lg='22' :offset='2' class="navbar">
        <Navbar></Navbar>
      </el-col>
    </el-row>
    <el-row class="recommend" style="background:white;margin-bottom:90px">
       <el-col :xs='22' :lg='22' :offset='2'>
       <h1 class="recommend_title">推荐课程</h1>
    </el-col>
    <el-col :xs='20' :lg='20' :offset='2' style="background:white">
      <Cards :recommend="recommend"></Cards>
    </el-col>
    </el-row>
 </div>
</template>

<script>
import Navbar from "./Header/navbar";
import Cards from "./Body/cards";
export default {
  name: "frontpage",
  data() {
    return {
      recommend:true
    };
  },
  components: {
      Navbar,
      Cards
  }
};
</script>

<style lang="less" scoped>
@import "~styles/z.less";
@import "~styles/css3.less";
@import "~styles/variables.less";
.wrapper {
  .recommend {
    .recommend_title {
      .MainFont;
      margin-top: 20px;
    }
  }
}
</style>
